// 自适应，全局rem
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "微软雅黑";
    transition: color .3s;
}

ul,
ol,
li {
    list-style-type: none;

    a {
        width: 100%;
        height: 100%;
    }
}

a {
    color: #000;
}

/* 防止多倍图缩小模糊 */
img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    min-width: .6rem;
    width: 100%;
}

.backgroudLogo {
    position: fixed;
    z-index: 1;
    right: 0;
    top: 0;
    width: 40%;
}

// 轮播图箭头
// 箭头缩放
$jiantouScale: .35;

@mixin jiantou {
    width: 1.94rem;
    height: 3.3rem;
    background: url("../images/jiantou.png") no-repeat;
    background-size: 100%;
    opacity: .6;
    transform: scale($jiantouScale);
    position: absolute;
    cursor: pointer;
}

#app {
    font-size: .32rem;
    // min-width: 450px;
    position: relative;
    z-index: 2;

    .c_header {
        $Hheight: 2rem;
        height: $Hheight;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(to right, #CCCCCC, #FFFFFF, #CCCCCC);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;

        .logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 2.4rem;
            min-width: .6rem;
            margin-left: 5.82rem;
            flex-shrink: 0;

            img {
                width: 100%;
            }
        }

        .list {
            display: flex;
            align-items: center;
            height: $Hheight;
            margin-right: 3.2rem;
            font-weight: bold;

            li {
                position: relative;
                width: 4.7rem;
                height: 100%;
                white-space: nowrap;

                a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: .45rem;
                    color: #000;
                }

                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: .08rem;
                    border-radius: .08rem;
                    opacity: 0;
                    transition: .3s;
                    background: linear-gradient(to right, rgba(126, 0, 18, 1), rgba(126, 0, 18, .7), rgba(126, 0, 18, 1));
                }

                &:hover::after,
                &.active::after {
                    opacity: 1;
                }

                &:hover,
                &.active {
                    a {
                        color: #751519;
                    }
                }
            }
        }
    }

    .banner {
        width: 100%;
        height: 13rem;
        box-sizing: content-box;
        overflow: hidden;
        display: flex;
        align-items: flex-end;

        &.homeSwiper {
            position: relative;

            .swiper-slide {
                display: flex;
                align-items: flex-end;
                overflow: hidden;

                .swiper-inner {
                    width: 100%;
                }
            }

            .swiper-pagination {
                margin-bottom: .4rem;

                .swiper-pagination-bullet {
                    display: inline-block;
                    width: .24rem;
                    height: .24rem;
                    margin: 0 .12rem;
                }

                .swiper-pagination-bullet-active {
                    background-color: rgba(126, 0, 18, .7);
                }
            }
        }

        @keyframes feixuan {
            0% {
                opacity: .4;
                transform-origin: 70% 10%;
                transform: rotate(-90deg) scale(.1) translateX(10rem) translateY(20rem);

            }

            40% {
                opacity: 1;
                transform: rotate(0) scale(1) translateX(0) scaleX(.01) translateY(6rem);
            }

            100% {}
        }

        .animate {
            animation: feixuan 1.3s;
            transform-style: preserve-3d;
        }
    }

    main {
        position: relative;

        .c_aside {
            width: 4.84rem;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-gap: .5rem;
            position: absolute;
            margin-top: .08rem;
            left: 0;
            z-index: 10;

            &.fixed {
                position: fixed;
                top: 2rem;
            }

            li {
                height: 1.2rem;
                padding-left: .3rem;
                position: relative;

                a {
                    display: flex;
                    align-items: center;
                    font-size: .4rem;
                    font-weight: bold;
                    color: #343535;
                    white-space: nowrap;
                    background: linear-gradient(to left, #cccccc00, #cccccc);
                    padding-left: .7rem;

                    &:hover {
                        color: #751519;
                    }
                }

                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0;
                    background: url("../images/triangle.png") no-repeat;
                    background-size: 100% 100%;
                    width: .7rem;
                    height: 100%;
                    cursor: pointer;
                }
            }
        }

        .c_gasbag {
            width: 5rem;
            height: 1.2rem;
            position: relative;
            right: 1rem;
            background: linear-gradient(to right, #cccccc00, #cccccccc, #cccccc00);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #353535;
            margin-left: 6.78rem;

            span {
                font-size: .56rem;
            }
        }

        // 胶囊标题居中
        @mixin centerGasbag {
            .c_gasbag {
                margin: 0 auto 1rem;
            }
        }

        .c_rich {
            font-size: .4rem;
            color: #353535;
            line-height: 1.8em;
            margin: 0 auto;
            width: 23.6rem;
            margin-top: .4rem;
            text-align: justify;
            padding: 10px;
            box-sizing: content-box;

            font {
                font-size: .4rem !important;
            }

            &.capsule {
                background: linear-gradient(to right, #efd9da, #efd9da00);
                border-radius: 16px;
            }
        }

        .content {
            position: relative;
            z-index: 5;
            padding-top: 1.5rem;

            .box {
                margin-bottom: 1.5rem;
            }

            // 首页
            .p_home {
                background: url("../images/backgroundHome.jpg") no-repeat;
                background-size: 100%;
            }

            // 关于我们
            .p_about {
                #introduce {
                    &>div {
                        display: flex;
                        justify-content: center;
                        position: relative;

                        .c_rich {
                            width: 16.6rem;
                        }
                    }

                    img {
                        width: 6rem;
                        margin-left: .6rem;
                    }
                }

                #resource {
                    .youshiList {
                        margin: .6rem auto 0;
                        width: 24rem;
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        grid-gap: 1rem;

                        &>div {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            flex-direction: column;
                        }

                        .headImage {
                            width: 2.4rem;
                            height: 2.4rem;
                            border-radius: 100%;
                            display: flex;
                            flex-shrink: 0;
                            position: relative;
                            z-index: 2;
                        }

                        .youshiText {
                            display: flex;
                            flex-shrink: 0;
                            justify-content: center;
                            background: linear-gradient(to bottom, rgba(228, 228, 228, 1), rgba(228, 228, 228, .1));
                            border-radius: .96rem;
                            font-size: .4rem;
                            position: relative;
                            bottom: .6rem;
                            padding: .8rem .6rem .6rem .6rem;
                            line-height: 1.7em;
                        }
                    }
                }

                #client {
                    .logoList {
                        width: 24rem;
                        margin: 0 auto;

                        &>div {
                            position: relative;
                            margin-top: 1rem;
                            margin-bottom: 2rem;
                            font-size: .48rem;
                            padding: 1.3rem;
                            transform-style: preserve-3d;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &>span {
                                position: absolute;
                                top: -0.4rem;
                                left: 0;
                                display: block;
                                padding: .08rem .3rem;
                                background: #fff;
                            }

                            .xiehui {
                                width: 90%;
                            }

                            &::before {
                                content: "";
                                display: block;
                                border: .02rem solid transparent;
                                position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                border-image: linear-gradient(to bottom, rgba(192, 192, 192, .2), rgba(192, 192, 192, 1)) 30 30;
                                transform: translateZ(-0.2rem);
                            }
                        }
                    }
                }
            }

            // 产品与服务
            .p_product {
                width: 24rem;
                margin: 0 auto;

                .c_rich {
                    margin-top: 0;
                    padding-bottom: 0;
                    padding-top: 0;
                    width: 100%;
                }

                .capsule {
                    padding-bottom: 10px;
                    padding-top: 10px;
                }

                .fuwu {
                    padding-bottom: 0;
                    padding-top: 0;
                    font-weight: bold;
                    margin-bottom: 5px;
                    margin-top: 10px;
                }

                .title {
                    color: #751519;
                    font-weight: bold;
                    font-size: .7rem;
                    padding-bottom: 0;
                    padding-top: 0;
                }

                #science {
                    .image {
                        width: 100%;
                        text-align: center;

                        img {
                            width: 12rem;
                        }
                    }
                }

                #strategy,
                #platform {
                    display: flex;
                    align-items: center;
                    margin-top: 2rem;

                    img {
                        width: 8rem;
                        flex-shrink: 0;
                    }

                    &>div {
                        position: relative;
                        top: .5rem;
                        flex: 1;
                    }
                }

                #scheme,
                #operation {
                    margin-top: 2rem;

                    .content {
                        display: flex;
                        align-items: center;

                        &>div {
                            flex: 1;
                        }

                        img {
                            width: 12rem;
                            flex-shrink: 0;
                        }
                    }

                    .lunbo {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        margin-top: 1rem;
                    }

                    .schemeSwiper {
                        width: 24rem;
                        overflow-x: hidden;
                    }

                    .schemeSwiper-prev {
                        @include jiantou;
                        left: 5rem;
                    }

                    .schemeSwiper-next {
                        @include jiantou;
                        background: url("../images/youjiantou.png") no-repeat;
                        background-size: 100%;
                        right: 5rem;
                    }
                }

                #platform {
                    img {
                        width: 9rem !important;
                    }

                    &>div {
                        position: relative;
                        top: 1rem;
                    }
                }

                #operation {
                    margin-top: 1.2rem;
                    margin-bottom: 1.5rem;

                    img {
                        width: 11rem !important;
                    }
                }
            }

            // 团队介绍
            .p_team {
                img {
                    width: 100%;
                }

                .c_gasbag {
                    right: 0;
                }

                #framework {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    @include centerGasbag;

                    .organization {
                        width: 24rem;
                    }
                }

                #staff {
                    margin-bottom: .6rem;

                    .staffImg {
                        width: 24rem;
                        margin: 0 auto;
                        position: relative;
                        bottom: 1rem;
                    }
                }

                #elegantFemeanour {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    @include centerGasbag;

                    &>div:not(.c_gasbag) {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .eleList {
                        width: 24rem;
                        overflow-x: hidden;
                    }

                    .eleSwiper-prev {
                        @include jiantou;
                        left: 5rem;
                    }

                    .eleSwiper-next {
                        @include jiantou;
                        background: url("../images/youjiantou.png") no-repeat;
                        background-size: 100%;
                        right: 5rem;
                    }

                    .elegantFemeanourImg {
                        width: 28rem;
                    }
                }
            }

            // 加入我们
            .p_join {
                .joinTab {
                    color: #353535;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-gap: .3rem;
                    width: 100%;
                    padding: 0 4.5rem;
                    height: 1.8rem;
                    position: sticky;
                    top: 1.95rem;
                    z-index: 2;
                    background: #FFFFFF;

                    li {
                        width: 100%;
                        margin: 0 auto;
                        height: 100%;
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;

                        a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transform-style: preserve-3d;
                            font-size: .48rem;
                        }

                        &:not(.active):hover {
                            color: rgba(126, 0, 18, 1);
                        }

                        &::before {
                            content: "";
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            opacity: 1;
                            transition: .3s;
                            border: .02rem solid transparent;
                            transform: translateZ(-0.2rem);
                            border-image: linear-gradient(to right, rgba(126, 0, 18, .2), rgba(126, 0, 18, .5)) 1 1;
                        }

                        &::after {
                            content: "";
                            display: block;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: .12rem;
                            opacity: 1;
                            transition: .3s;
                            border-radius: .12rem;
                            background: linear-gradient(to right, rgba(126, 0, 18, .3), rgba(126, 0, 18, 1));
                        }

                        &.active {
                            &::before {
                                opacity: 0;
                            }

                            &::after {
                                opacity: 1;
                            }
                        }

                        &:not(.active) {
                            &::before {
                                opacity: 1;
                            }

                            &::after {
                                opacity: 0;
                            }
                        }
                    }
                }

                .c_rich {
                    margin-left: 5rem;
                }

                .c_title {
                    display: inline-flex;
                    align-items: center;
                    height: 1.4rem;
                    margin-left: 5rem;
                    margin-top: 1.4rem;
                    margin-bottom: .4rem;

                    .c_title_text {
                        width: 4.96rem;
                        height: 100%;
                        color: #fff;
                        margin-right: .1rem;
                        font-size: .72rem;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        padding-right: .4rem;
                        background: linear-gradient(to right, rgba(126, 0, 18, 0), rgba(126, 0, 18, 1));
                    }

                    .c_title_right {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        position: relative;

                        .c_title_address {
                            font-size: .48rem;
                            margin-right: .1rem;
                        }

                        img {
                            width: .72rem;
                            position: absolute;
                            bottom: .72rem;
                        }

                        .publicity {
                            font-size: .48rem;
                            font-weight: bold;
                            color: transparent;
                            background-image: linear-gradient(to right, rgba(126, 0, 18, .3), rgba(126, 0, 18, .1));
                            background-clip: text;
                            -webkit-background-clip: text;
                        }
                    }
                }

                .bossEmail {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #353535;
                    font-size: .64rem;
                    margin-top: 2rem;
                    margin-bottom: 2.4rem;

                    a {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .emailImage {
                            width: 1.28rem;
                        }

                        span {
                            margin-left: .2rem;
                            margin-right: 1.88rem;
                        }

                        .bossImage {
                            width: 2.1rem;
                        }
                    }
                }
            }

            #news {
                margin: 0 auto;
                position: relative;
                bottom: .4rem;
            }
        }

        .newDetailBox {
            position: relative;
            padding-top: 1.5rem;
            width: 24rem;
            margin: 0 auto 0;

            .title {
                font-size: .56rem;
                font-weight: bold;
            }

            .c_rich {
                margin-left: 0;
                font-size: .4rem;
            }
        }

        .news {
            background: #e9e9e9;
            height: 8.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .newsSwiper {
                width: 24rem;
                overflow-x: hidden;

                .swiper-slide {
                    width: 6.92rem;
                    height: 7.3rem;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;

                    .image {
                        position: relative;
                        width: 100%;
                        height: 4rem;
                        flex-shrink: 0;

                        .redBox {
                            position: absolute;
                            width: 1.6rem;
                            height: 1.2rem;
                            background: #AD0000;
                            z-index: 1;

                            &.leftTop {
                                left: 0;
                                top: 0;
                            }

                            &.rightBottom {
                                right: 0;
                                bottom: 0;
                            }
                        }

                        img {
                            width: 100%;
                            height: 100%;
                            position: relative;
                            z-index: 2;
                            padding: .2rem;
                        }
                    }

                    .title {
                        height: 3em;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        font-size: .36rem;
                        font-weight: bold;
                        flex-shrink: 0;
                        overflow: hidden;
                    }

                    .detail {
                        display: -webkit-box;
                        width: 100%;
                        height: 6.3em;
                        border-top: .04rem solid #AD0000;
                        background: #E2D5D5;
                        padding: .3rem .2rem;
                        font-size: .32rem;
                        line-height: 1.7em;
                        overflow: hidden;
                        white-space: normal !important;
                        text-overflow: ellipsis;
                        word-wrap: break-word;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;

                        span {
                            display: flex;
                            height: 4.8em;
                            overflow: hidden
                        }
                    }
                }
            }

            .newsSwiper-prev {
                @include jiantou;
                left: 5rem;
            }

            .newsSwiper-next {
                @include jiantou;
                background: url("../images/youjiantou.png") no-repeat;
                background-size: 100%;
                right: 5rem;
            }
        }
    }

    .c_image {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba($color: #000000, $alpha: .7);
        z-index: -1;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(0);
        transition: .3s;

        &.c_image_show {
            transform: scale(1);
            z-index: 99999;
        }

        .mainImage {
            width: 24rem;
        }

        .leftTurn {
            @include jiantou;
            left: 4rem;
        }

        .rightTurn {
            @include jiantou;
            background: url("../images/youjiantou.png") no-repeat;
            background-size: 100%;
            right: 4rem;
        }

        .close {
            position: absolute;
            top: 1rem;
            right: 4.2rem;
            width: 1.2rem;
            cursor: pointer;
        }
    }

    footer {
        background: url("../images/footer.jpg") no-repeat;
        background-size: 100% 100%;
        height: 5.4rem;
        position: relative;
    }

    .beian {
        display: flex;
        align-items: center;
        justify-content: center;
        height: .72rem;
        background: rgba($color: #fff, $alpha: 1);
        // position: absolute;
        bottom: 0;
        left: 0;
        right: 0;

        a {
            color: #777;
            font-size: .28rem;
        }
    }


    @media screen and (max-width: 750px) {
        .c_header {
            .logo {
                margin-left: 3.82rem;
                margin-right: 2rem;
            }
        }

        .banner {
            height: 12rem;
        }

        main {
            .news {
                .newsSwiper {
                    .swiper-slide {
                        .title {
                            height: 2em;
                            display: block;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
}